<!DOCTYPE html>
<html>
<head>
<#include "../common/head.ftl">
</head>

<body>
<div class="wrapper2">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">上级资源</label>
            <div class="col-sm-4 required">
                <input type="text" id="p_sys_res_name" class="form-control" name="pName" readonly="readonly">
                <input type="hidden" id="p_sys_res_value" name="pid" value="">
                <input type="hidden" id="p_sys_res_level" name="level" value="0">
            </div>
            <label class="col-sm-2 control-label">类型</label>
            <div class="col-sm-4">
                <select class="form-control" name="type">
                    <option value="0">菜单</option>
                    <option value="1">资源</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">名称</label>
            <div class="col-sm-4 required"><input type="text" name="name" class="form-control"></div>
            <label class="col-sm-2 control-label">资源标识</label>
            <div class="col-sm-4 required"><input type="text" name="permission" class="form-control"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">URL</label>
            <div class="col-sm-4 required"><input type="text" name="link" class="form-control"></div>
            <label class="col-sm-2 control-label">排序</label>
            <div class="col-sm-4"><input type="text" name="priority" class="form-control" value="0"></div>
        </div>
        <div class="form-group optl_icon">
            <label class="col-sm-2 control-label">图标</label>
            <div class="col-sm-4 required">
                <div class="input-group">
                    <input type="text" name="icon" class="form-control" value="fa fa-chevron-right">
                    <span class="input-group-addon"><span class="fa fa-chevron-right" id="icon"></span></span>
                </div>
            </div>
        </div>
        <div class="form-group form-btn-group">
            <div class="col-sm-12 text-right">
                <button type="submit" class="btn btn-primary">确认</button>
                <button type="button" id="cancel_btn" class="btn btn-default">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="p_sys_res_tree_wrapper" class="ztree_select">
    <ul id="p_sys_res_tree" class="ztree" style="margin-top:0; max-height:200px;overflow:auto"></ul>
</div>
</body>
<#include "../common/scripts.ftl">
<script type="text/javascript">
    var pwin = window.pwin,tree,curNode;
    $(".form-horizontal").validate({
// 	rules : {
// 	},
        submitHandler : function(form) {
            var submitBtn = $("button[type='submit']",$(form));
            if(submitBtn.length>0){
                submitBtn.attr("disabled","disabled").html("<span class='fa fa-spinner fa-pulse'></span> 正在提交...");
            }
            var comp = $(".form-horizontal").serializeObject();

            console.log(comp);

            $.ajax({
                url : "sys_resource/add",
                type : "POST",
                contentType : "application/json;charset=utf-8",
                dataType : "json",
                data: JSON.stringify({m:comp}),
                success : function(data) {
                    pwin.layer.closeAll();
                    pwin.grid.jqGrid().trigger("reloadGrid");
                    pwin.layer.msg(data.message);
                }
            });
        }
    });
    tree = $.fn.zTree.init($("#p_sys_res_tree"), {
        view: {
            dblClickExpand: false
        },
        async: {
            enable: true,
            url:"sys_resource/list/tree",
            dataFilter: function(treeId, parentNode, childNodes) {
                if (!childNodes) return null;
                for (var i=0, l=childNodes.length; i<l; i++) {
                    childNodes[i].name = childNodes[i].name+"("+childNodes[i].priority+")" ;
                }
                return childNodes;
            }
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pid"
            }
        },
        callback: {
            onClick: function(e, treeId, treeNode) {
                if(treeNode==curNode) {
                    tree.cancelSelectedNode(treeNode);
                    $("#p_sys_res_name").val("");
                    $("#p_sys_res_value").val("");
                    $("#p_sys_res_level").val("0");
                    curNode = null;
                } else {
                    $("#p_sys_res_name").val(treeNode.name);
                    $("#p_sys_res_value").val(treeNode.id);
                    $("#p_sys_res_level").val(treeNode.level+1);
                    curNode = treeNode;
                }
                hideSysResSelect();
            }
        }
    });
    $("#cancel_btn").on("click",function(){
        pwin.layer.closeAll();
    });
    function showSysResSelect() {
        var sysRes = $("#p_sys_res_name");
        var sysResOffset = $("#p_sys_res_name").offset();
        $("#p_sys_res_tree_wrapper").css({left:sysResOffset.left + "px", top:sysResOffset.top + sysRes.outerHeight() + "px",width:sysRes.outerWidth()}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideSysResSelect() {
        $("#p_sys_res_tree_wrapper").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "p_sys_res_tree_wrapper" || $(event.target).parents("#p_sys_res_tree_wrapper").length>0)) {
            hideSysResSelect();
        }
    }
    $("#p_sys_res_name").on("click",showSysResSelect);

    $(".form-horizontal input[name='icon']").on("keyup",function(){
        $("#icon").attr("class",$(this).val());
    });

</script>
</html>